<template>
	<div class="brushWordsBox">
		<AppHeader title="选择单词" :banAnimate="true" backgroundColor="transparent" :showRight="false" :showText="true"
			titleColor="#000" @leftClickEvent="handleHeaderLeft()">
			<template #text>
				<div @click="cancelSelect">取消</div>
			</template>
		</AppHeader>
		<div class="titleBox">
			<div class="title">已选择<span class="number">{{selectWordsNumber}}个</span>单词</div>
		</div>
		<Mescroll v-bind="mescrollConfig" class="research-dev-demand-pool__scroll-container" :style="{
		    height: 'calc(100vh - 140px)',
		    position: 'fixed',
		    top: '85px',
		    bottom: 0,
		  }" @init="mescrollInited">
			<div class="wordsList" v-if="wordsList.length">
				<div class="wordsItem" v-for="(item,index) in wordsList" :key="index"
					@click="item.select = !item.select">
					<div class="words" v-if="item.words">{{item.words}}</div>
					<div class="select" v-if="item.select">
						<img src="../../assets/images/brushWords/select.png" />
					</div>
					<div class="add" v-else>
						<img src="../../assets/images/brushWords/add.png" />
					</div>
				</div>
			</div>
			<van-empty v-else description="暂无数据"></van-empty>
		</Mescroll>
		<!-- <div class="fillBox"></div> -->
		<AppLoading v-if="loading" />
		<div class="practiceBox">
			<div class="practice" @click="startPractice">开始练习</div>
		</div>
	</div>
</template>

<script setup>
	import AppHeader from "@/components/AppHeader.vue";
	import {
		ref,
		onMounted,
		reactive,
		computed
	} from "vue";
	import {
		showToast,
	} from "vant";
	import {
		getWordsList
	} from "@/api/brushWords.js";
	import {
		validateAuthAudio
	} from "@/utils/dateFormat"
	import {
		useRouter,
		useRoute
	} from "vue-router";

	const route = useRoute();
	const router = useRouter();
	//选中单词熟数量
	const selectWordsList = ref([])
	const selectWordsNumber = computed(() => {
		selectWordsList.value = wordsList.value.filter(item => {
			return item.select
		})
		return selectWordsList.value.length;
	});

	//取消选中单词
	const cancelSelect = () => {
		wordsList.value = wordsList.value.map(item => {
			return {
				...item,
				select: false
			}
		})
	};



	//下拉分页相关逻辑
	import Mescroll from "mescroll.js/mescroll.vue";
	import AppLoading from "@/components/AppLoading.vue";
	const loading = ref(false)
	const mescrollInstance = ref(null)
	const mescrollInited = (mescroll) => {
		mescrollInstance.value = mescroll;
	};
	const mescrollConfig = reactive({
		down: {
			use: true,
		},
		up: {
			page: {
				num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
				size: 20 //每页数据条数,默认10
			},
			auto: true,
			isBounce: false,
			htmlNodata: '<p class="upwarp-nodata">-- 无更多数据 --</p>',
			callback: (page) => {
				getBrushWords(page);
			},
		},
	})

	onMounted(() => {
		loading.value = true;
	})
	//可选单词列表
	const wordsList = ref([])
	const getBrushWords = ({
		num,
		size
	}) => {
		getWordsList({
			page: num,
			limit: size
		}).then(res => {
			const {
				code,
				data
			} = res;
			if (code == 1 && data) {
				loading.value = false
				const isNestPage = data.length < size;
				let mapData = data.map(item => {
					return {
						...item,
						select: false
					}
				})
				if (num === 1) {
					let defaultSelectData = []
					defaultSelectData = mapData.map((item, index) => {
						return {
							...item,
							select: index < 6 ? true : false
						}
					})
					wordsList.value = defaultSelectData;

				} else {
					wordsList.value = wordsList.value.concat(mapData);
				}
				mescrollInstance.value.endSuccess(wordsList.value.length, !isNestPage);

			} else {
				throw res;
			}
		})
	}

	//返回上一页
	const handleHeaderLeft = () => {
		router.go(-1);
	};

	//开始练习
	const startPractice = () => {
		// validateAuthAudio().then(isAuthorized => {
		// 	if (isAuthorized) {
		let selectWords = selectWordsList.value.map(item => {
			return item.id
		})
		if (selectWords.length < 2) {
			showToast('请至少选择2个单词去练习')
		} else {
			localStorage.setItem("brushWordsSelect", JSON.stringify(selectWords));
			router.push({
				path: '/brushWords/followReading',
				query: {
					type: 'practice'
				}
			})
		}
		// 	} else {
		// 		console.log('录音权限未授权');
		// 		// 你可以在这里处理未授权的情况  
		// 	}
		// }).catch(error => {
		// 	// 处理任何可能抛出的错误（通常来自 reject 的部分）  
		// 	console.error('处理 validateAuthAudio 函数时出错', error);
		// });
	};
</script>

<style lang="scss" scoped>
	.brushWordsBox {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
		overflow: scroll;

		.titleBox {
			display: flex;
			align-items: center;
			padding: 54px 10px 15px;


			.title {
				font-size: 16px;
				color: #8E8E8E;

				.number {
					color: #0CB76C;
				}
			}
		}

		.wordsList {
			padding: 0 10px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.wordsItem {
				width: 151px;
				height: 50px;
				padding: 0 11px;
				background: #FFFFFF;
				border-radius: 5px;
				font-size: 16px;
				text-align: center;
				color: #666666;
				margin-bottom: 10px;
				display: flex;
				justify-content: center;
				align-items: center;

				.words {
					flex: 1;
				}

				.select,
				.add {
					width: 18px;
					height: 18px;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.practiceBox {
			height: 65px;
			position: fixed;
			bottom: 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F5F5F5;

			.practice {
				margin: 0 10px;
				width: 355px;
				height: 45px;
				line-height: 45px;
				background: linear-gradient(270deg, #29F19C 0%, #02A1F9 100%);
				border-radius: 23px;
				text-align: center;
				font-size: 18px;
				color: #FFFFFF;
			}
		}

		.fillBox {
			height: 65px;
		}
	}
</style>